
import React, { useState, useEffect } from 'react'
import { Table, Popconfirm, Button, Input, Space, Modal, Form, message, Select, Tag, InputNumber } from 'antd';
import axios from '../../axiosConfig.js';
import { deciphering, encryption } from '../../util/Util.js';
import { withRouter } from 'react-router-dom';
function TrainQuestion(props) {
  const [dataSource, setDataSource] = useState([])
  const [selectionType, setSelectionType] = useState('checkbox');
  const [selectQue, setSelectQue] = useState("")
  const [userInfo, setUserInfo] = useState({});
  const [searchCode, setSearchCode] = useState("");

  var quedif = ["简单", "正常", "稍难", "难"]
  var quedifColor = ["green", "orange", "volcano", "red"]
  useEffect(() => {
    setUserInfo(JSON.parse(deciphering(localStorage.getItem("userInfo"))))
    train()

  }, [])

  const train = () => {
    axios.get("/train/select").then(res => {
      if (Object.keys(res.data).length === 0 && res.data.constructor === Object) {
        props.history.push("/login")
      } else {
        setDataSource(res.data)
      }
    })
  }
  const columns = [
    // {
    //   title: '序号',
    //   dataIndex: 'index',
    //   key: 'index',
    //   align: "center",
    //   fixed: "left",
    //   width: "5%",
    //   render: (text, record, index) => {
    //     return <span style={{ fontSize: "12px" }}>{index + 1}</span>
    //   }
    // },
    {
      title: '试题代码',
      dataIndex: 'quecode',
      key: 'quecode',
      align: "center",
      width: "8%",
      render: (text) => {
        return <span style={{ fontSize: "12px" }}>{text}</span>
      }
    },
    {
      title: '试题标题',
      dataIndex: 'quetitle',
      key: 'quetitle',
      align: "center",
      width: "12%",
      render: (text) => {
        return <span style={{ fontSize: "12px" }}>{text}</span>
      }
    },
    {
      title: '试题分类',
      dataIndex: 'quetype',
      key: 'quetype',
      align: "center",
      width: "10%",
      render: (text) => {
        return <span style={{ fontSize: "12px" }}>{text}</span>
      }
    },
    {
      title: '试题内容',
      dataIndex: 'quevalue',
      key: 'quevalue',
      align: "left",
      className: "wrapTitle",
      render: (text) => {
        return <span style={{ fontSize: "12px" }}>{text}</span>
      }
    },
    {
      title: '试题分数',
      dataIndex: 'quescore',
      key: 'quescore',
      align: "center",
      className: "wrapTitle",
      width: "6%",
      render: (text) => {
        return <span style={{ fontSize: "12px" }}>{text}</span>
      }
    },
    {
      title: '难易程度',
      dataIndex: 'quedifficulty',
      key: 'quedifficulty',
      align: "center",
      className: "wrapTitle",
      width: "6%",
      render: (text) => {
        return <span style={{ fontSize: "12px" }}>{<Tag color={quedifColor[text]}>{quedif[text]}</Tag>}</span>
      }
    },
  ];

  const op = [
    {
      value: 0,
      label: "简单",
    },
    {
      value: 1,
      label: '正常',
    },
    {
      value: 2,
      label: '稍难',
    },
    {
      value: 3,
      label: '难',
    },
  ]

  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      setSelectQue(selectedRowKeys.join(","));
    },
    getCheckboxProps: (record) => ({
      disabled: record.name === 'Disabled User',
      // Column configuration not to be checked
      name: record.name,
    }),
  };


  const searchData = () => {
    axios.get("/train/select?searchCode=" + searchCode).then(res => {
      setDataSource(res.data)
    })

  }
  const searchChange = (e) => {
    setSearchCode(e.target.value)
  }
  const cleanSearch = () => {
    train()
    setSearchCode("");

  }
  return (
    <div style={{ background: "white", minHeight: document.documentElement.clientHeight - 94, padding: '15px' }}>
      <div style={{ display: 'flex' }} >
        <div style={{ flex: "1 1 100px" }} >
          <Space>
            <Input placeholder='试题代码或试题名称' onChange={(e) => searchChange(e)} value={searchCode}></Input>
            <Button onClick={() => searchData()}>搜索</Button>
            <Button onClick={() => { cleanSearch() }}>清除</Button>
          </Space>

        </div>
        <div style={{ flex: "1 1 100px", textAlign: 'right' }} >
          <Button onClick={() => { train() }}>刷新</Button>
        </div>
      </div>

      <Table
        rowSelection={{
          type: selectionType,
          ...rowSelection,
        }}

        columns={columns} dataSource={dataSource} style={{ margin: "10px 0 0 0" }}
        rowKey={(item) => item.id}
        pagination={{ size: 10 }}
        size='small'
        scroll={{ x: 1200, y: document.documentElement.clientHeight - 314 }}
      >
      </Table>
    </div>
  )
}

export default withRouter(TrainQuestion)